<template>
  <MaskContainer ref="MaskContainer" :main-style="maskMianStyle" :title="title" @handelOk="handelOk">
    <div :class="{ 'edit-list-box-mobile': showMobilePage }" class="edit-list-box">
      <el-scrollbar :noresize="true" class="scroll-container">
        <el-form :model="editInfo" :label-width="labelWidth" label-position="left" size="small">
          <el-form-item
            :label="label"
            class="input-style">
            <el-input
              v-if="inputType !== 'daterange'"
              v-model="value"
              :type="inputType"
              :rows="5"
              :placeholder="inputType === 'textarea' ? placholder:''"
              resize="none"
            />
            <el-date-picker
              v-else
              v-model="value"
              :unlink-panels="true"
              :clearable="true"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="timestamp"
              format="yyyy/MM/dd"
              size="small" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
  </MaskContainer>
</template>
<script>
import MaskContainer from '../MaskContainer';

export default {
  components: { MaskContainer },
  props: {
    inputType: {
      type: String,
      default: 'text'
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      key: '',
      label: '',
      labelWidth: '70px',
      value: '',
      editInfo: {},
      data: {},
      title: '修改信息',
      placholder: '请输入备注信息',
      maskMianStyle: {
        width: '400px',
        maxHeight: '284px',
        minHeight: '284',
        borderRadius: '8px',
        overflow: 'hidden'
      }
    };
  },
  methods: {
    init() {
      this.data = {};
      this.label = '';
      this.key = '';
      this.value = '';
      this.labelWidth = '70px';
      this.$refs.MaskContainer.tabMaskShow();
    },
    tabMaskShow(item, key, label) {
      this.data = item;
      this.label = label;
      this.key = key;
      this.labelWidth = '70px';
      this.value = item.priceInfo[key] / 100;
      this.title = '修改价格';
      this.$refs.MaskContainer.tabMaskShow();
    },
    toEditRemarks(item, value, label, type) {
      this.data = item;
      this.data.type = type;
      this.value = value;
      this.label = label;
      this.labelWidth = '47px';
      this.title = '修改备注';
      this.key = 'remark';
      this.placholder = '请输入备注信息';
      this.$refs.MaskContainer.tabMaskShow();
    },
    toEditLinks(item, value, label, type) {
      this.data = item;
      this.data.type = type;
      this.value = value;
      this.label = label;
      this.labelWidth = '70px';
      this.title = '修改超链接';
      this.key = 'hyperlinks';
      this.placholder = '请输入超链接';
      this.$refs.MaskContainer.tabMaskShow();
    },
    toEditContent(item, value, label, type) {
      this.data = item;
      this.data.type = type;
      this.value = value;
      this.label = label;
      this.labelWidth = '70px';
      this.title = '修改需求';
      this.placholder = '请输入需求内容';
      this.key = 'content';
      this.$refs.MaskContainer.tabMaskShow();
    },
    toEditDaterange(item, startTime, endTime, label, type) {
      this.data = item;
      this.data.type = type;
      this.value = [startTime || new Date().getTime(), endTime || new Date().getTime()];
      this.label = label;
      this.labelWidth = '70px';
      this.title = '修改价格有效时间';
      // this.placholder = '请输入需求内容';
      this.key = 'content';
      this.$refs.MaskContainer.tabMaskShow();
    },
    async handelOk() {
      this.$emit('handelOk', { data: this.data, key: this.key, value: this.value });
    }
  }
};
</script>
<style scoped lang="scss">
.edit-list-box {
  height: 295px;
  padding: 0 5px;
  // padding-bottom: 10px;
  & ::v-deep {
    .el-textarea__inner {
      border-radius: 4px;
      padding: 9px !important;
      &:hover {
        border-color: #ddd;
      }
      &:focus {
        border-color: #DCDFE6;
      }
    }
  }
  &.edit-list-box-mobile {
    ::v-deep .el-form-item {
      .el-form-item__content {
        .el-textarea {
          width: 98%;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.edit-list-box {
  .el-scrollbar__bar.is-horizontal {
    display: none;
  }
  .tags-input-container {
    .el-row--flex {
      flex-wrap: wrap;
    }
  }
  .el-form-item {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
  }
  .el-form-item__label {
    padding: 0 0 0 7px;
    color: #666;
    font-size: 14px !important;
  }
  .el-date-editor .el-range-separator {
    width:  9% !important;
  }
  .date-input {
    .el-date-editor {
      width: 100%;
    }
    .el-input__inner {
      width: 99%;
      height: 32px;
      border-radius: 4px;
      background-color: #fff;
      border: solid 1px #cccccc;
    }
  }
  .input-style {
    .el-input__inner {
      outline: none;
      width: 240px;
      height: 32px;
      border-radius: 4px;
      background-color: #fff;
      border: solid 1px #cccccc;
      color: #333333;
      font-size: 12px;
      text-indent: 5px;
      padding: 0;
    }
    .el-input {
      &.is-disabled {
        .el-input__inner {
          background-color: #f5f7fa;
          border-color: #E4E7ED;
          color: #515151;
          cursor: not-allowed;
        }
      }
    }
  }

}
</style>
